<template>
    <section id="search" class="search">
        <div class="search-menu">
            <span class="search-icon"></span>
        </div>
        <form action class="search-form">
            <input type="search" name="word" class="search-wrap" autocomplete="off" />
        </form>
    </section>
</template>

<script>
    export default {
        name: 'search',
        data(){
            return {

            }
        }
    }
</script>

<style lang="less" scoped>
    @import "../../static/less/common";
    .search{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 100;
        background-color: transparent;
        .clearfix();

        .search-form:before{
            width: 30px;
            border-radius: 10px 0 0 10px;
            background-position-x: 5px;
            background-color: hsla(0,0%,100%,.6);
        }
    }
    .search-menu{
        position: absolute;
        top: 0;
        left: 0;
        height: 44px;
        min-height: 44px;
        padding-right: 11px;
        cursor: pointer;
        .search-icon{
            display: block;
            width: 40px;
            height: 40px;
            margin-left: -5px;
            margin-top: 3px;
            background: url() no-repeat;
            background-size: cover;
        }
    }
    .search-form{
        position: relative;
        height: 44px;
        margin-left: 35px;
        margin-right: 10px;
        padding-left: 30px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
        &:before{
            content: "";
            display: block;
            position: absolute;
            top: 7px;
            left: 0;
            border-radius: 3px 0 0 3px;
            background: #dbdbdb url() no-repeat;
            background-size: 30px 30px;
            height: 30px;
            width: 30px;
        }

        .search-wrap{
            height: 30px;
            width: 100%;
            padding: 0 0 0 26px;
            display: block;
            background: #fff url() no-repeat;
            background-size: 30px 30px;
            border: none;
            margin-top: 7px;
            line-height: 18px;
            border-radius: 0 10px 10px 0;
            background-color: hsla(0,0%,100%,.6);
        }
    }
</style>
